<template>
  <div class="line-height posr">
    <a title="行距" class="hover" @click="show">
       <span class="bgImg"></span>
       <i class="posa"></i>
    </a>
    <span class="ib">行距</span>
    <ul class="panel-content posf bo-bg" v-show="visible">
      <li v-for="(item, i) in list" class="content-item hover panel-label" @click="click(item)" :class="i == curIndex ? 'state-checked' : ''" :key="i">
        <i class="tick-icon"></i><span v-text="item"></span>
      </li>
    </ul>
  </div>
</template>

<script>
  import {Observer} from '../../core/util'
  import { Message } from 'element-ui'
  // 下拉组件
  export default {
    data: function () {
      return {
        visible: false,
        list: ['1', '1.5', '1.75', '2', '3', '4', '5'],
        curIndex: - 1
      };
    },
    created: function () {
      Observer.register('hidecloth', () => {
        this.visible = false;
      });
      Observer.register('selectionchange', (editor) => {
        let value = editor.queryCommandValue('lineheight');
        for(let i = 0, len = this.list.length; i < len; i++) {
          if(this.list[i] == value) {
            this.curIndex = i;
            break;
          } else if(this.list[i] > value) {
            this.curIndex = i - 1;
            break;
          }
        }
      });
    },
    methods: {
      show: function () {
        if (!window.editorId) return Message({
          message: $.i18n('messager_need_to_focus'),
          type: 'warning'
        });
        this.visible = true;
        Observer.fire('showcloth');
      },
      click: function (value) {
        Observer.fire('execCommand', ['lineheight', value]);
        this.visible = false;
        Observer.fire('hidecloth');
      }
    }
  }
</script>
<style>
    .panel-label {
        list-style: none;
    }
</style>
